<template>
  <div class="addScheduling_container">
    <div>
      <el-input
        v-model="model.courseName"
        placeholder="请输入课程名称"
        class="class_search"
        clearable
      />
    </div>
    <div class="empty_box" v-if="branchList.length == 0">
      <el-empty description="暂无数据"></el-empty>
    </div>
    <div
      v-loading="loaading"
      v-if="branchList.length > 0"
      style="
        display: flex;
        border-radius: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      "
    >
      <div class="branch_name_all">
        <div
          class="branch_name"
          @click="swithActive(item, index)"
          :class="{ active_name: item.branchId == activeId }"
          v-for="(item, index) in branchList"
          :key="item.branchId"
        >
          {{ item.branchName }}
        </div>
      </div>
      <div class="right_content" v-if="courseList.length > 0">
        <div class="el_collapse">
          <el-collapse
            accordion
            slot="title"
            style="width: 100%"
            @change="handleChange"
            v-model="activeNames"
          >
            <el-collapse-item
              class="mb_10"
              :name="childItem.courseId"
              v-for="childItem in courseList"
              :key="childItem.courseId"
            >
              <template slot="title">
                <i
                  :class="{ collapsed: activeNames == childItem.courseId }"
                  class="el-icon-arrow-right"
                ></i>
                <span
                  class="title_list overTxt"
                  :class="{ color_green: activeNames == childItem.courseId }"
                >{{ childItem.courseName }}</span
                >
                <el-button
                  v-preventReClick
                  @click.stop="showDialog(childItem)"
                  type="primary"
                  style="margin-left: 10px"
                  size="mini"
                  icon="el-icon-plus"
                >添加授课班级
                </el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click.stop="showHistoryTeaching(childItem)"
                >选择历史排课
                </el-button
                >
              </template>
              <div
                class="flex_center"
                v-if="childItem.courseSchedulingList.length > 0"
              >
                <div
                  class="content_item"
                  v-for="courseSchedulingItem in childItem.courseSchedulingList"
                  :key="courseSchedulingItem.id"
                  @click="routeTo(courseSchedulingItem)"
                >
                  <img
                    class="book_img"
                    src="@/assets/images/book_img.png"
                    alt="加载失败"
                  />
                  <div class="content_item_coursename">
                    {{
                      courseSchedulingItem.schedulingName
                        ? courseSchedulingItem.schedulingName
                        : '暂无'
                    }}
                  </div>
                  <!--                  <div class="content_item_title">-->
                  <!--                    ({{ typeText[courseSchedulingItem.type] }})-->
                  <!--                  </div>-->
                  <div class="content_item_title overTxt">
                    {{
                      courseSchedulingItem.teacherNames
                        ? courseSchedulingItem.teacherNames
                        : '暂无'
                    }}
                  </div>
                  <div class="absolute">
                    <i
                      @click.stop="delCourse(courseSchedulingItem.id)"
                      class="el-icon-error"
                    ></i>
                  </div>
                </div>
              </div>
              <div
                class="courseSchedulingList_box"
                v-if="childItem.courseSchedulingList.length == 0"
              >
                <el-empty description="暂无数据"></el-empty>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="empty_box" v-if="courseList.length == 0">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
    <!--  添加|修改  授课班级弹窗  -->
    <addTeachingDialog
      openType="1"
      :dialog-visible.sync="dialogVisible"
      :courseInfo="courseInfo"
      @refresh="getCourseSchedulingList('refresh')"
    ></addTeachingDialog>
    <!-- 添加历史排课 -->
    <historyTeachingDrawer
      :courseId="nowCourseId"
      port="manager"
      @refresh="getCourseSchedulingList('refresh')"
      :show.sync="showHistory"
      :semesterName="$route.query.semesterName"
      :schoolSemesterId="$route.query.id"
    ></historyTeachingDrawer>
  </div>
</template>

<script>
import {
  getCourseSchedulingList,
  deleteCourseScheduling
} from '@/api/schoolSemester/schoolSemester'
import addTeachingDialog from '../teachIndex/compontents/addTeachingDialog'
import historyTeachingDrawer from '../teachIndex/compontents/historyTeachingDrawer'

export default {
  name: 'addScheduling',
  components: {
    addTeachingDialog,
    historyTeachingDrawer
  },
  data() {
    return {
      model: {
        courseName: ''
      },
      dialogVisible: false,
      showHistory: false,
      activeId: '',
      activeIndex: 0,
      loaading: false,
      branchList: [],
      courseList: [],
      nowCourseId: '',
      activeNames: '',
      courseInfo: {
        courseId: '',
        courseName: '',
        courseType: ''
      },
      typeText: {
        0: '必修',
        1: '选修',
        2: '考证',
        3: '工学'
      }
    }
  },
  watch: {
    model: {
      handler() {
        this.getCourseSchedulingList()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    showHistoryTeaching(item) {
      this.nowCourseId = item.courseId
      this.showHistory = true
    },
    routeTo(item) {
      this.$router.push({
        path: '/schoolOrganization/classTeachingDetial',
        query: {
          id: item.id,
          branchId: this.activeId,
          schoolSemesterId: this.$route.query.id
        }
      })
    },
    async showDialog(item) {
      this.courseInfo = {
        courseId: item.courseId,
        courseName: item.courseName,
        courseType: item.courseType,
        branchId: this.activeId,
        semesterId: this.$route.query.id
      }
      this.dialogVisible = true
    },
    async getCourseSchedulingList(type) {
      this.loaading = true
      let params = {
        courseName: this.model.courseName
      }
      let res = await getCourseSchedulingList(this.$route.query.id, params)
      const { code, data } = res
      if (code == 200) {
        this.loaading = false
        this.branchList = data.branchList
        if (data.branchList && data.branchList.length > 0) {
          if (!type) {
            this.activeId = data.branchList[0].branchId
            this.courseList = data.branchList[0].courseList
          } else {
            this.activeId = data.branchList[this.activeIndex].branchId
            this.courseList = data.branchList[this.activeIndex].courseList
          }
          if (this.courseList.length > 0) {
            this.activeNames = this.courseList[0].courseId
          }
        }
      }
    },
    delCourse(id) {
      this.$confirm('确认要删除该排课吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          let res = await deleteCourseScheduling(id, this.$route.query.id)
          const { code } = res
          if (code == 200) {
            this.$message.success('删除成功！')
            this.getCourseSchedulingList('refresh')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleChange(val) {
      this.activeNames = val
    },
    swithActive(item, index) {
      this.activeId = item.branchId
      this.activeIndex = index
      this.courseList = this.branchList[index].courseList
      if (this.courseList.length > 0) {
        this.activeNames = this.courseList[0].courseId
      }
    }
  }
}
</script>

<style scoped lang="scss">
.branch_name_all {
  padding: 30px 0;
  box-sizing: border-box;
  width: 208px;
  border-right: 1px solid rgba(229, 229, 229, 1);
}

.branch_name {
  width: 100%;
  height: 40px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(128, 128, 128, 1);
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.branch_name:hover {
  background: #28b28b;
  color: #ffffff !important;
}

.active_name {
  background: #28b28b;
  color: #ffffff !important;
}

.addScheduling_container {
  padding: 20px;
  box-sizing: border-box;
}

.right_content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

  .el_collapse {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 240px);
    overflow: auto;
    position: relative;
  }
}

.absolutes {
  position: absolute;
  top: 10px;
  right: 10px;
}

.el-icon-arrow-right,
.el-icon-arrow-down {
  margin-right: 4px;
  font-size: 20px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
}

.title_list {
  max-width: calc(100vw - 760px);
  font-size: 16px;
  font-weight: 600;
  color: rgba(128, 128, 128, 1);
}

.class_name {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  padding: 10px 0 10px 50px;
  box-sizing: border-box;
}

.mb_10 {
  margin-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.collapse_container {
  width: 100%;
}

.flex_center {
  width: 100%;
  display: flex;
  padding: 10px 0 10px 50px;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.content_item {
  width: 222px;
  height: 132px;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(
      135deg,
      rgba(38, 191, 189, 1) 0%,
      rgba(0, 225, 181, 1) 100%
  );
  box-shadow: 0 1px 4px rgba(40, 178, 139, 0.4);
  display: flex;
  padding: 9px 20px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin: 0 0 10px 16px;

  &_coursename {
    font-size: 16px;
    font-weight: 600;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &_title {
    font-size: 12px;
    font-weight: 400;
    color: white;
    width: 180px;
  }

  &_time {
    font-size: 12px;
    font-weight: 400;
    color: white;
  }

  &:hover {
    .absolute {
      display: flex;
    }
  }
}

.book_img {
  width: 110px;
  height: 120px;
  position: absolute;
  top: 10px;
  right: -30px;
}

.el-icon-error {
  margin-left: 6px;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.el-icon-edit {
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
}

.absolute {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  align-items: center;
}

.semesterName {
  width: 314px;
}

.radio_group {
  width: 300px;
}

.dialog_footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.color_green {
  color: #28b28b;
}

.collapsed {
  transform: rotate(90deg);
  color: #28b28b;
}

.el-icon-arrow-right {
  transition: all 0.2s ease;
}

.empty_box {
  width: 100%;
  padding: 10vh 0;
  box-sizing: border-box;
  height: 680px;
}

.courseSchedulingList_box {
  width: 100%;
  height: 280px;
}

.date_picker {
  width: 140px;
}

.class_search {
  width: 180px;
  margin: 0 0 20px 0;
}
</style>
